<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/layui/css/layui.css">
    <link rel="icon" href="${pageContext.request.contextPath}/assets/images/favicon.png" type="image/png">
    <title>商品分类</title>


    <link href="${pageContext.request.contextPath}/assets/plugins/morris-chart/morris.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>

    <link href="${pageContext.request.contextPath}/assets/css/icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/responsive.css" rel="stylesheet">

    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-144208445-2"></script>
    <script>window.dataLayer = window.dataLayer || [];

    function gtag() {
        dataLayer.push(arguments);
    }

    gtag('js', new Date());
    gtag('config', 'UA-144208445-2');</script>
    <script>var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?8b02a318fde5831da10426656a43d03c";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();</script>
    <style>
        .white-box{
            background-color:rgb(236,236,236);
        }
        .dataTables_wrapper{
            background-color: white;
        }

        #example,#example th{
            text-align: center;
        }
        /*分页相关*/
        .pagination > li > button {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #337ab7;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #eee;
        }

        .head-three table th {
            border: 1px solid grey;
        }

        .el-card__body > .head-one1 {
            font-size: 16px;
        }



        .el-table th {
            white-space: nowrap;
            overflow: hidden;
            user-select: none;
            padding: 12px 0;
            min-width: 0;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
        }

        .el-table--border th {
            border-right: 1px solid #ebeef5;
        }

        .el-table--border td {
            border-bottom: 1px solid #ebeef5;
        }

        .cell {
            box-sizing: border-box;
            white-space: normal;
            word-break: break-all;
            line-height: 23px;
        }

        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
        }

        .dataTables_wrapper .dataTables_paginate {
            float: right;
            text-align: right;
        }

        .dataTables_wrapper .dataTables_paginate {
            float: right;
            text-align: right;
            padding-top: 0.25em;
        }
        /*关闭弹窗按钮*/
        .window #close-window .btn {
            border: 0;
            outline: none;
            background-color: #fff;
        }

        .window #close-window .btn:hover {
            color: deepskyblue;
        }
        #page {
            text-align: center;
            width: 34px;
            height: 34px;
        }

        #select_pageSize {
            width: 80px;
            height: 34px;
        }

        .selectC {
            display: inline-block;
            border-top-left-radius: .3rem;
            padding: .67rem 1.5rem;
            font-size: 1.25rem;
            margin-left: -1px;
            line-height: 1.25;
            background-color: #fff;
            border: 1px solid #dee2e6;
            border-bottom-left-radius: .3rem
        }

        .selectC:focus {
            outline: 0;
            box-shadow: 0 0 0 .0rem rgba(0, 123, 255, .25)
        }

        .toPage {
            display: inline-block;
            /*border-top-left-radius: .3rem;*/
            /*padding: .85rem 1.5rem;*/
            font-size: 1.25rem;
            height: 34px;
            margin-left: -1px;
            line-height: 1.25;
            /*background-color: #fff;*/
            border: 1px solid #dee2e6;
            /*border-bottom-left-radius: .3rem;*/
            width: 34px;
        }

        .toPage[type=text]:focus {
            outline: 0;
            box-shadow: 0 0 0 .0rem rgba(0, 123, 255, .25)
        }
    </style>
</head>
<body class="sticky-header">
<jsp:include page="../inc/left.jsp"/>
<div class="main-content" style="background-color: rgb(238, 238, 238); min-height: 870px;">
    <jsp:include page="../inc/header.jsp"/>

    <div class="white-box">

        <div class="page-title-box" style="background-color: #FFFFFF;">
            <h4 class="page-title">商品分类</h4>
            <ol class="breadcrumb">
                <li>
                    <a href="${pageContext.request.contextPath}/index">首页</a>
                </li>
                <li>
                    <a href="productList">商品</a>
                </li>
                <li class="active">
                    商品分类
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>

        <div class="table-responsive">
            <button class="btn btn-primary">
                新增
            </button>
            <br><br>
            <div id="example_wrapper" class="dataTables_wrapper">

                <table id="example" class="table dataTable table-bordered" role="grid" aria-describedby="example_info">
                    <thead>
                    <tr role="row" class="odd">
                        <th class="sorting_asc">编号</th>
                        <th class="sorting" >分类名称</th>
                        <th class="sorting" >级别</th>
                        <th class="sorting" >商品数量</th>
                        <th class="sorting" >商品单位</th>
                        <th class="sorting" >导航栏</th>
                        <th class="sorting" >是否显示</th>
                        <th class="sorting" >排序</th>
                        <th class="sorting" >设置</th>
                        <th class="sorting" >操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${sortList.list}" var="s">
                        <tr role="row" class="odd">
                            <td>${s.id}</td>
                            <td>${s.name}</td>
                            <td>${s.level}</td>
                            <td>${s.productCount}</td>
                            <td>${s.productUnit}</td>
                            <td> <i class="fa fa-2x fa-toggle-${p.recommandStatus==1?'on':'off'}"></i></td>
                            <td> <i class="fa fa-2x fa-toggle-${p.recommandStatus==1?'on':'off'}"></i></td>
                            <td>${s.sort}</td>
                            <td>${s.sort}</td>
                            <td>
                                <div class="cell">
                                    <button type="button" class="btn btn-info" onclick="sortAdd(${s.id})">编辑</button>
                                    <button type="button" class="btn btn-danger" onclick="sortDel(${s.id})">删除</button>
                                </div>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>

                <!--分页开始-->
                <nav aria-label="...">
                    <ul class="pagination">
                        <span id="current" hidden>${sortList.pageNum}</span>
                        <span id="currentLimit" hidden>${sortList.pageSize}</span>
                        <li class="page-item disabled" style="border-color:white">
                        <span class="page-link"
                              href="${pageContext.request.contextPath}/#">共${sortList.total}条数据</span>
                        </li>
                        <li style="float: left" class="page-item">
                            <select id="select_pageSize" name="pageSize" class="selectC">
                                <option value="10" ${sortList.pageSize==10?"selected":""}>10条/页</option>
                                <option value="12" ${sortList.pageSize==12?"selected":""}>12条/页</option>
                                <option value="14" ${sortList.pageSize==14?"selected":""}>14条/页</option>
                                <option value="16" ${sortList.pageSize==16?"selected":""}>16条/页</option>
                            </select>
                        </li>
                        <li class="page-item ${sortList.pageNum==1?"disabled":""}">
                            <a class="page-link "${sortList.pageNum==1?"href='#'":""}
                               href="${pageContext.request.contextPath}/goods/productSort?page=${sortList.pageNum-1}&size=${sortList.pageSize}">上一页</a>
                        </li>
                        <li class="page-item ${sortList.pageNum==1?"active":""}">
                            <a class="page-link"
                               href="${pageContext.request.contextPath}/goods/productSort?page=1&size=${sortList.pageSize}">1</a>
                        </li>

                        <c:if test="${sortList.pageNum>2}">
                            <li class="page-item disabled">
                                <span class="page-link">...</span>
                            </li>
                        </c:if>

                        <c:if test="${sortList.pageNum>1&&sortList.pageNum<sortList.pages}">
                            <li class="page-item ${(sortList.pageNum>1&&sortList.pageNum<sortList.pages)?"active":""}">
                                <span class="page-link">${sortList.pageNum}</span>
                            </li>
                        </c:if>

                        <c:if test="${sortList.pageNum<sortList.pages-1}">
                            <li class="page-item disabled ">
                                <span class="page-link">...</span>
                            </li>
                        </c:if>

                        <c:if test="${sortList.pages>1}">
                            <li class="page-item ${sortList.pageNum==sortList.pages?"active":""}">
                                <a id="cntpage" class="page-link "
                                   href="${pageContext.request.contextPath}/goods/productSort?page=${sortList.pages}&size=${sortList.pageSize}">${sortList.pages}</a>
                            </li>
                        </c:if>
                        <li class="page-item  ${sortList.pageNum==sortList.pages?"disabled":""}">
                            <a class="page-link" ${sortList.pageNum==sortList.pages?"href='#'":""}
                               href="${pageContext.request.contextPath}/goods/productSort?page=${sortList.pageNum+1}&size=${sortList.pageSize}">下一页</a>
                        </li>
                        <li class="page-item">
                            <span class="disabled">前往</span>
                            <input id="page" type="text" class="toPage" style="float:left;">
                            <span class="disabled">页</span>
                        </li>

                    </ul>
                </nav>
                <!--分页结束-->

            </div>
        </div>
    </div>
        <!--Begin core plugin -->
        <script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
        <script src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
        <script src="${pageContext.request.contextPath}/assets/plugins/moment/moment.js"></script>
        <script src="${pageContext.request.contextPath}/assets/js/jquery.slimscroll.js "></script>
        <script src="${pageContext.request.contextPath}/assets/js/jquery.nicescroll.js"></script>
        <script src="${pageContext.request.contextPath}/assets/js/functions.js"></script>
        <!-- End core plugin -->

        <!--Begin Page Level Plugin-->
        <script src="${pageContext.request.contextPath}/assets/plugins/morris-chart/morris.js"></script>
        <script src="${pageContext.request.contextPath}/assets/plugins/morris-chart/raphael-min.js"></script>
        <script src="${pageContext.request.contextPath}/assets/plugins/jquery-sparkline/jquery.charts-sparkline.js"></script>
        <script src="${pageContext.request.contextPath}/assets/pages/dashboard.js"></script>
        <script src="${pageContext.request.contextPath}/assets/layui/layui.js"></script>
        <script src="${pageContext.request.contextPath}/assets/js/jquery-2.0.2.js"></script>
        <!--End Page Level Plugin-->
</body>
<script>
    $('#select_pageSize').bind("change",function (){
        let size = $("#select_pageSize").find("option:selected").val();
        location.href="${pageContext.request.contextPath}/goods/productSort?page=1"+"&size="+size;
    })

    $('#page').bind("keyup",function (obj) {
        let key = obj.originalEvent.keyCode
        let page = $("#page").val();
        let mpage = $("#cntpage").text();
        let size = $("#currentLimit").text();
        if(key===13){
            if(!(page<=mpage && page>0)) {
                alert("输入范围错误！！！")
            }else {
                location.href="${pageContext.request.contextPath}/goods/productSort?page="+page+"&size="+size;
            }
        }
    })
</script>

<div id="t" style="display: none;">
    <form class="layui-form" id="add-form" action="${pageContext.request.contextPath}/goods/saveQueryAll" method="post">
        <br>
        <br>
        <p class="layui-form-item center" style="text-indent: 20px">
            <span style="color: red">*</span><span style="font-weight: bold;font-size: 20px;">添加分类&emsp;</span>
            <input required type="text" name="name" style="width: 200px" autocomplete="off">
        </p>
        <div class="layui-form-item">
            <div class="layui-input-block" style="margin-left: 150px">
                <input style="height: 40px" class="layui-btn" type="submit"/>
                <button style="border: none;height: 39px;width: 65px;line-height: 100%"><a
                        href="${pageContext.request.contextPath}/goods/resetSort">重置</a></button>
            </div>
        </div>
    </form>
</div>
</html>
